import React from 'react';
import { inject, observer } from 'mobx-react';

@inject('counter')
@observer
class App extends React.Component {
  render () {
    const { counter } = this.props;
    return <div>
      <button onClick={counter.increment}>+</button>
      <span>{counter.count}</span>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.getResult}</span>
      <div>
        <input type="text" value={counter.username} onChange={e => counter.changeUserName(e.target.value)} />
        {counter.username}
      </div>
    </div>;
  }
}

export default App;
